<template>
  <div id="app">
    <!-- 未登录时显示登录页面 -->
    <LoginView v-if="!isLoggedIn" @login-success="handleLoginSuccess" />
    
    <!-- 已登录时显示主界面 -->
    <MainView 
      v-else 
      :user="currentUser" 
      @logout="handleLogout"
      @profile-updated="handleProfileUpdated"
    />
  </div>
</template>

<script>
// 导入Vue3的组合式API
import { ref, onMounted } from 'vue'
// 导入登录视图组件
import LoginView from './views/LoginView.vue'
// 导入主视图组件
import MainView from './views/MainView.vue'
// 导入用户API
import { getUserInfo } from './api/user'

/**
 * App根组件
 * 负责管理整个应用的登录状态和视图切换
 */
export default {
  name: 'App',
  components: {
    LoginView,
    MainView
  },
  setup() {
    // 登录状态标识
    const isLoggedIn = ref(false)
    // 当前用户信息
    const currentUser = ref(null)

    /**
     * 检查用户登录状态
     * 从localStorage获取token，验证有效性并获取用户信息
     */
    const checkLoginStatus = async () => {
      const token = localStorage.getItem('token')
      if (token) {
        try {
          // 通过token获取用户信息验证登录状态
          const response = await getUserInfo()
          if (response.data.code === 200) {
            isLoggedIn.value = true
            currentUser.value = response.data.data
          } else {
            // token无效，清除本地存储
            localStorage.removeItem('token')
          }
        } catch (error) {
          console.error('检查登录状态失败:', error)
          // 网络错误或其他异常，清除本地存储
          localStorage.removeItem('token')
        }
      }
    }

    /**
     * 处理登录成功事件
     * @param {Object} userData - 登录返回的用户数据，包含token和user信息
     */
    const handleLoginSuccess = (userData) => {
      isLoggedIn.value = true
      currentUser.value = userData.user
      // 保存token到本地存储
      localStorage.setItem('token', userData.token)
    }

    /**
     * 处理退出登录事件
     * 清除登录状态和本地存储的token
     */
    const handleLogout = () => {
      isLoggedIn.value = false
      currentUser.value = null
      localStorage.removeItem('token')
    }
    
    /**
     * 处理个人资料更新事件
     * @param {Object} updatedUser - 更新后的用户信息
     */
    const handleProfileUpdated = (updatedUser) => {
      // 合并更新用户信息
      currentUser.value = { ...currentUser.value, ...updatedUser }
    }
    
    // 组件挂载时检查登录状态
    onMounted(() => {
      checkLoginStatus()
    })
    
    // 暴露给模板使用的数据和方法
    return {
      isLoggedIn,
      currentUser,
      handleLoginSuccess,
      handleLogout,
      handleProfileUpdated
    }
  }
}
</script>

<style>
/* App样式在global.css中定义 */
</style> 